<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:extend="http://thymeleafexamples" layout:decorator="layout/base">
<head>
    <title>添加产品</title>
    <link href="../../static/assets/css/ueditor/themes/default/css/umeditor.css" th:href="@{/assets/css/ueditor/themes/default/css/umeditor.css}" type="text/css" rel="stylesheet"/>
</head>
<body>
<!-- Page header -->
<div class="page-header" layout:fragment="page-header">
    <div class="page-header-content">
        <div class="page-title">
            <h4><i class="icon-arrow-left52 position-left"></i> <span class="text-semibold"
                                                                      th:text="#{web.name}">管理系统</span> - 添加产品</h4>
        </div>
    </div>
</div>
<!-- /page header -->

<!-- Main content -->
<div class="content-wrapper" layout:fragment="content">
    <!-- Table -->
    <div class="panel panel-flat min-panel">
        <div class="panel-heading">
            <h5 class="panel-title text-primary"><i class="icon-list"/>产品信息</h5>
        </div>

        <div class="panel-body">
            <!-- Starting step -->
            <div class="steps-starting-step">
                <h6>产品信息</h6>
                <fieldset>
                    <form action="#" id="infoForm" class="form-horizontal">
                        <input id="id" name="id" type="hidden" th:value="${p?.id}"/>
                        <input id="coverPic" name="coverPic" type="hidden" th:value="${p?.coverPic}"/>

                        <div class="form-group">
                            <label class="control-label col-lg-1">名称:</label>
                            <div class="col-lg-9">
                                <input name="name" type="text" placeholder="产品名称" class="form-control required" maxlength="50" th:value="${p?.name}"/>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-lg-1">类型:</label>

                            <div class="col-lg-9">
                                <select class="select" name="type">
                                    <option th:each="t:${types}" th:value="${t.value}" th:text="${t.name}" th:selected="(${p?.type} == ${t.value})"></option>
                                </select>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-lg-1">价格:</label>

                            <div class="col-lg-9">
                                <input name="price" type="number" placeholder="产品价格" class="form-control required" number="true"
                                       maxlength="11" th:value="${p?.price}"/>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-lg-1">描述:</label>
                            <div class="col-lg-9">
                                <input id="description" name="description" type="hidden" th:value="${p?.description}"/>
                                <div id="myEditor" style="width: 100%; height: 300px;" th:utext="${p?.description}"></div>
                            </div>
                        </div>
                    </form>
                </fieldset>

                <h6>产品图片</h6>
                <fieldset>
                    <div>
                        <div class="form-horizontal">
                            <div class="form-group">
                                <button id="addImageBtn" class="btn btn-primary">添加图片</button>
                            </div>
                        </div>

                        <div id="imageContainer" class="row">

                        </div>
                    </div>
                </fieldset>
            </div>
        </div>
    </div>

    <div id="uploadImageModal" class="modal fade in">
        <div class="modal-dialog" style="width: 800px;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">×</button>
                    <h5 class="modal-title text-primary">添加图片文件</h5>
                </div>

                <div class="modal-body">
                    <div>
                        <input id="input-id" name="file" type="file" multiple="multiple"/>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" id="uploadClose" class="btn btn-link" data-dismiss="modal">关闭</button>
                    <!--<button type="button" id="uploadClose" class="btn btn-primary" data-dismiss="modal">保存</button>-->
                </div>
            </div>
        </div>
    </div>

    <div id="edit_dialog" class="modal fade in">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">×</button>
                    <h5 class="modal-title text-primary">编辑图片信息</h5>
                </div>

                <form action="#" id="edit">
                    <div class="modal-body">
                        <div class="form-group">
                            <label>图片名称</label>
                            <input name="id" type="hidden"/>
                            <input name="fileName" type="text" placeholder="姓名" class="form-control"
                                   required="true" maxlength="50" disabled="disabled"/>
                        </div>

                        <div class="form-group">
                            <label>图片排序<span class="text-danger">*</span></label>
                            <input name="sort" type="number" placeholder="按数字从小到大排序"
                                   class="form-control" number="true"
                                   required="true" maxlength="50"/>
                        </div>

                        <div class="form-group">
                            <label>图片描述<span class="text-danger">*</span></label>
                            <textarea name="description" rows="5" cols="5" class="form-control required" maxlength="150" placeholder="备注描述" th:inline="text"></textarea>
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-link" data-dismiss="modal">关闭</button>
                        <button type="button" id="submitEdit" class="btn btn-primary">保存</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script type="text/template" id="imageDiv">
        <div class="col-sm-6 col-md-3 image-div" data-id="{id}" data-name="{name}" data-sort="{sort}" data-desc="{desc}">
            <div class="thumbnail img-responsive">
                <div class="thumb">
                    <img src="{src}" alt="通用的占位符缩略图" style="height: 250px"/>
                    <div class="caption-overflow">
                        <span>
                            <a href="{src}" data-popup="lightbox" rel="gallery" class="btn border-white text-white btn-flat btn-icon btn-rounded"><i class="icon-enlarge"></i></a>
                            <a href="#" class="btn border-white text-white btn-flat btn-icon btn-rounded image-del"><i class="glyphicon glyphicon-trash" title="删除"></i></a>
                        </span>
                    </div>
                </div>

                <div class="caption" style="height: 120px">
                    <h6 class="no-margin">
                        <span class="text-primary">{name}</span>
                        <div class="pull-right">
                            <a href="#" class="image-cover"><i class="text-primary glyphicon glyphicon-share {hideCover}" title="设为封面"></i></a>
                            <a href="#" class="image-banner" extend:hasPermission="product_banner_modify"><i class="text-primary glyphicon glyphicon-play-circle" title="设为banner"></i></a>
                            <a href="#" class="image-edit"><i class="text-success glyphicon glyphicon-edit" title="编辑"></i></a>
                            <!--<a href="#" class="image-del"><i class="text-danger glyphicon glyphicon-trash" title="删除"></i></a>-->
                        </div>
                    </h6>
                    <p>{desc}</p>
                </div>
            </div>
        </div>
    </script>
    <!-- /Table-->
    <script type="text/javascript" th:src="@{/assets/js/plugins/forms/wizards/steps.min.js}"></script>
    <script type="text/javascript" th:src="@{/assets/js/plugins/uploaders/fileinput.min.js}"></script>
    <script type="text/javascript" th:src="@{/assets/js/plugins/uploaders/fileinput-zh.js}"></script>
    <script type="text/javascript" th:src="@{/assets/js/plugins/media/fancybox.min.js}"></script>
    <script type="text/javascript" th:src="@{/assets/js/plugins/ueditor/third-party/template.min.js}"></script>
    <script type="text/javascript" th:src="@{/assets/js/plugins/ueditor/umeditor.config.js}"></script>
    <script type="text/javascript" th:src="@{/assets/js/plugins/ueditor/umeditor.min.js}"></script>
    <script type="text/javascript" th:src="@{/oss/js/product/view.js}"></script>
</div>
</body>
</html>